<template>
  <div>
    <!-- <h1>小首页</h1> -->
    <div class="q1">

        <div class="q3">
          <div class="q2"><router-link to="/shou/shouy/qysj"  class="large-link">企业数据</router-link></div>
          <div class="q4"><router-link to="/shou/shouy/fwsj"  class="large-link">服务数据</router-link></div>
          <div class="q5"><router-link to="/shou/shouy/sfsj"  class="large-link">省份数据</router-link></div>
      </div>
      
    </div>

    <router-view></router-view>
  </div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {

  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
.q1{
  width: 1300px;
  height: 60px;
  border: 1px solid rgb(235 235 236);
  background-color: white;
}
a {
  text-decoration: none;
}
.q2{
  width: 120px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  // background-color: aqua;
  border-right: 1px solid rgb(220,223,230);
  display: inline-block;
}
.q3{
  border: 2px solid rgb(220,223,230);
  width: 362px;
  height: 35px;
  position:relative;
  left: 30px;
  top: 10px;
  // border-radius:2px;
}
.q4{
  width: 120px;
  line-height: 35px;
  text-align: center;
  // background-color: aqua;
  border-right: 1px solid rgb(220,223,230);
  display: inline-block;
}
.q5{
  width: 120px;
  line-height: 35px;
  text-align: center;
  // background-color: aqua;
  // border-right: 1px solid rgb(220,223,230);
  display: inline-block;
}
.q3 div a.router-link-exact-active {
 background-color: rgb(86, 152, 220);
}
.large-link {
  font-size: 16px;
  padding: 7px 28px;
  // border-radius: 5px 0px 0px 5px;
  /* 其他样式 */
}
.large-link {
  color: rgb(96,98,102);  /* 默认颜色 */
}
.large-link.router-link-exact-active {
  color: white  /* 激活后的颜色 */
}
</style>